import { Button, Form, Input } from 'antd';
import { FieldType } from '@/modules/login'
import React, { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { code, login } from '@/api/login';
import { message } from 'antd';
import './index.module.scss'
import styles from './index.module.scss'
import { useDispatch } from 'react-redux'
import { setUser } from '../../features/user/userSlice'


export default function Login() {
  const [codeUrl, setcodeUrl] = useState<string>('')
  const [username, setusername] = useState<string>("admin")
  const [password, setpassword] = useState<string>("123456")
  const [codeValue, setcodeValue] = useState<string>('1234')
  const [codeid, setcodeid] = useState<string>('')
  const dispatch = useDispatch()
  const navigateTo = useNavigate()
  useEffect(() => {
    void getCode()
  }, [])

  async function getCode(): Promise<void> {
    const codeData = await code()
    setcodeUrl("data:image/jpeg;base64," + codeData.data.codeUrl)
    setcodeid(codeData.data.codeId)
  }

  const onFinish = async () => {
    const res = await login({ username, password, code: codeValue, codeid })
    console.log(res);
    if (res.code === 400) {
      message.error("验证码错误,已为您从新更换验证码")
      getCode()
    }
    if (res.code === 1 && res.data !== null) {
      dispatch(setUser(res.data))
      navigateTo(`/home/${res.data.id}`)
    }


  }
  const onFinishFailed = () => {

  }

  function passwordHandle(event: React.ChangeEvent<HTMLInputElement>) {
    setpassword(event.target.value)
  }
  function usernameHandle(event: React.ChangeEvent<HTMLInputElement>) {
    setusername(event.target.value)
  }
  function codeValueHandle(event: React.ChangeEvent<HTMLInputElement>) {
    setcodeValue(event.target.value)
  }

  return (
    <div className={styles.bj}>
      <div className={styles.mt}></div>
      <div className={styles.loginbox}>
        <div className={styles.header}>
          <div className={styles.password}>
            <img src="/src/assets/login/R-C.gif" alt="" />
          </div>
        </div>

        <div className={styles.body}>
          <Form
            size="large"
            name="basic"
            wrapperCol={{ span: 24 }}
            style={{ maxWidth: 300, maxHeight: 400, margin: "auto" }}
            initialValues={{ remember: true }}
            onFinish={onFinish}
            onFinishFailed={onFinishFailed}
            autoComplete="off"
            labelAlign="left"
          >

            <Form.Item<FieldType>
              className={styles.uitem}
              name="username"
              initialValue={"admin"}
              rules={[{ required: true, message: '请输入暗号' }]}
            >
              <Input onChange={usernameHandle} placeholder="请输入暗号" />
            </Form.Item>

            <Form.Item<FieldType>

              name="password"
              rules={[{ required: true, message: '请输入机要' }]}
              initialValue={"123456"}
            >
              <Input.Password onChange={passwordHandle} placeholder="请输入机要" />
            </Form.Item>

            <Form.Item<FieldType>
              name="isme"
              // valuePropName="checked"
              labelAlign="left"
              initialValue={"1234"}
              wrapperCol={{ offset: 0, span: 24 }}
            >
              <div className={styles.code}>

                <Input onChange={codeValueHandle} className={styles.codeinput} placeholder="验证码" />
                <div className={styles.base}></div>
                <img onClick={getCode} className={styles.codeimg}
                  src={codeUrl} alt="" />
              </div>
            </Form.Item>

            <Form.Item wrapperCol={{ offset: 0, span: 24 }}>
              <Button className={styles.login_button} type="primary" htmlType="submit">
                探索
              </Button>
            </Form.Item>
          </Form>
        </div>

        <div className={styles.dong}>
          <Button className={styles.bt} type="link">重头再来</Button>
          <Button className={styles.bt} type="link">寻回过往</Button>
        </div>
      </div>
    </div>
  )
}
